<template>
  <div class="home-container">
    <!-- 头部 -->
    <el-header>
      <div class="header">
        <!-- 左头部 -->
        <div class="left">
          <img src="../../assets/logo.png" alt>
          <!-- 折叠侧导航栏按钮 -->
          <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
            <el-button @click="isCollapse=!isCollapse" class="collapsebtn">
              <i :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'"></i>
            </el-button>
          </el-radio-group>
          <!-- 面包屑导航 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to=" '/' ">{{routerArr===''?'数据概览':'面板'}}</el-breadcrumb-item>
            <el-breadcrumb-item>{{routerArr}}</el-breadcrumb-item>
          </el-breadcrumb>
          <!-- /面包屑导航结束 -->
        </div>
        <!-- 右头部 -->
        <div class="right">
          <el-tooltip class="item" effect="light" content="站内搜索" placement="bottom" enterable>
            <i class="el-icon-search" @click="isSearchShow=!isSearchShow"></i>
          </el-tooltip>
          <el-input
            v-if="isSearchShow"
            placeholder="站内搜索"
            prefix-icon="el-icon-search"
            v-model="input2"
            @blur="isSearchShow=false"
          ></el-input>
          <el-tooltip class="item" effect="light" content="全屏" placement="bottom" enterable>
            <i class="el-icon-rank"></i>
          </el-tooltip>
          <el-dropdown>
            <span class="el-dropdown-link">
              超级管理
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="$router.push('/')">首页</el-dropdown-item>
              <el-dropdown-item @click.native="goback">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-header>
    <!-- /头部结束 -->
    <!-- 主体部分 -->
    <el-container class="main">
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse?'60px':'200px'">
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          active-text-color="#fff"
          unique-opened
          router
          :collapse-transition="false"
          @select="onMenu($event)"
        >
          <el-menu-item index="/dashboard">
            <i class="hmmm hmmm-dashboard"></i>
            <span slot="title">数据概览</span>
          </el-menu-item>
          <el-submenu index="/companys/list">
            <template slot="title">
              <i class="hmmm hmmm-people"></i>
              <span slot="title">后台管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/base/users">
                <i class="hmmm hmmm-component"></i>
                用户
              </el-menu-item>
              <el-menu-item index="/base/menus">
                <i class="hmmm hmmm-component"></i>菜单
              </el-menu-item>
              <el-menu-item index="/base/permissions">
                <i class="hmmm hmmm-component"></i>权限
              </el-menu-item>
              <el-menu-item index="/base/logs">
                <i class="hmmm hmmm-component"></i>日志
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="/companys/list">
            <i class="hmmm hmmm-peoples"></i>
            <span slot="title">企业管理</span>
          </el-menu-item>
          <el-submenu index="/questions/list">
            <template slot="title">
              <i class="hmmm hmmm-documentation"></i>
              <span slot="title">题库管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/questions/list">
                <i class="hmmm hmmm-component"></i>基础题库
              </el-menu-item>
              <el-menu-item index="/questions/choice">
                <i class="hmmm hmmm-component"></i>精选题库
              </el-menu-item>
              <el-menu-item index="/questions/new">
                <i class="hmmm hmmm-component"></i>试题录入
              </el-menu-item>
              <el-menu-item index="/questions/randoms">
                <i class="hmmm hmmm-component"></i>组题列表
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="/subjects/list">
            <template slot="title">
              <i class="hmmm hmmm-table"></i>
              <span slot="title">学科管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/subjects/list">
                <i class="hmmm hmmm-component"></i>学科
              </el-menu-item>
              <el-menu-item index="/subjects/directorys">
                <i class="hmmm hmmm-component"></i>目录
              </el-menu-item>
              <el-menu-item index="/subjects/tags">
                <i class="hmmm hmmm-component"></i>标签
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="/articles/list">
            <i class="hmmm hmmm-component"></i>
            <span slot="title">面试技巧</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!-- /侧边栏结束 -->
      <!-- main面板 -->
      <el-main>
        <el-card>
          <el-tag
            v-for="(tag,index) in tagList"
            :key="index"
            closable
            size="small"
            type="info"
            @close.stop="handleClose(tag,index)"
            @click.stop="toMenus(tag,index)"
            :class="isActive===index?'active':''"
          >{{tag}}</el-tag>
        </el-card>
        <router-view class="maincard"/>
      </el-main>
      <!-- /main面板结束 -->
    </el-container>
    <!-- /主体部分结束 -->
  </div>
</template>

<script>
export default {
  name: 'HomeContainer',
  data() {
    return {
      // 首页样式
      input2: '',
      isCollapse: false,
      isSearchShow: false,
      tagList: [],
      tags: {
        '/dashboard': '数据概览',
        '/base/users': '用户',
        '/base/menus': '菜单',
        '/base/permissions': '权限',
        '/base/logs': '日志',
        '/companys/list': '企业管理',
        '/questions/list': '基础题库',
        '/questions/choice': '精选题库',
        '/questions/new': '试题录入',
        '/questions/randoms': '组题列表',
        '/subjects/list': '学科',
        '/subjects/directorys': '目录',
        '/subjects/tags': '标签',
        '/articles/list': '面试技巧'
      },
      routerlist: {
        数据概览: '/dashboard',
        用户: '/base/users',
        菜单: '/base/menus',
        权限: '/base/permissions',
        日志: '/base/logs',
        企业管理: '/companys/list',
        基础题库: '/questions/list',
        精选题库: '/questions/choice',
        试题录入: '/questions/new',
        组题列表: '/questions/randoms',
        学科: '/subjects/list',
        目录: '/subjects/directorys',
        标签: '/subjects/tags',
        面试技巧: '/articles/list'
      },
      isActive: 0,
      nowTag: ''
    }
  },
  methods: {
    goback() {
      window.localStorage.clear()
      this.$router.push('/login')
    },

    onMenu(val, index) {
      const menuName = this.tags[val]
      if (this.tagList.indexOf(menuName) === -1) {
        this.tagList.push(menuName)
      } else {
        this.tagList.slice(index, 1).push(menuName)
      }
      const ii = this.tagList.indexOf(menuName)
      this.isActive = ii
    },
    // 点击标签跳转到相应页面
    toMenus(val, index) {
      const url = this.routerlist[val]
      const paths = '#' + url
      if (window.location.hash !== paths) {
        this.$router.push(url)
        this.isActive = this.tagList.indexOf(val)
      }
      this.nowTag = this.tags[url]
    },
    // 关闭标签
    handleClose(tag, i) {
      this.tagList.splice(this.tagList.indexOf(tag), 1)
      const menus = this.tagList[this.tagList.length - 1]
      const index = this.tagList.indexOf(menus)
      const a = this.tagList.indexOf(this.nowTag)
      if (a === -1) {
        this.$router.push(this.routerlist[menus]).catch(err => err)
        this.isActive = index
      }
      if (this.tagList.length < 2) {
        this.isActive = index
      }
    }
  },
  computed: {
    routerArr() {
      return this.$route.name
    }
  },
  watch: {},
  created() {},
  mounted() {}
}
</script>

<style lang='less' scoped>
.home-container {
  height: 100%;
  .el-header {
    background: #0ca7fa;
    .header {
      display: flex;
      align-items: center;
      .left {
        flex: 1;
        display: flex;
        height: 60px;
        flex-direction: row;
        align-items: center;
        .collapsebtn {
          padding: 20px 20px 0px 35px;
          background-color: rgba(0, 0, 0, 0);
          border: 0;
          i {
            color: #fff;
            font-size: 20px;
          }
        }
        /deep/.el-breadcrumb {
          .el-breadcrumb__inner {
            color: #fff;
            font-size: 14px;
            font-weight: 400;
          }
        }
      }
      .right {
        display: flex;
        align-items: center;
        i {
          color: #fff;
          font-size: 20px;
          margin: 0 10px;
        }
        .el-dropdown {
          color: #fff;
          width: 180px;
        }
      }
    }
  }
  .main {
    background-color: rgb(248, 248, 248);
    height: 100%;
    .el-aside {
      .el-menu {
        height: 100%;
      }
      .el-menu-item {
        &.is-active {
          i {
            color: #fff;
          }
          background-color: #0ca7fa;
        }
        &:hover {
          i {
            color: #fff;
          }
          background-color: #0ca7fa;
        }
      }
      .hmmm {
        padding-right: 8px;
        color: #000;
      }
    }
    .el-main {
      padding: 0;
      /deep/.el-card__body {
        padding: 0;
        .el-tag {
          padding: 0 20px;
          margin: 2px 5px;
          background-color: #ffffff;
          border-color: #d3d3d3;
          display: inline-block;
          height: 28px;
          line-height: 26px;
          font-size: 13px;
          border-radius: 0;
          color: #333;
        }
      }
      .active {
        background-color: #0ca7fa !important;
        color: #fff !important;
        /deep/.el-tag__close {
          color: #fff;
        }
      }
      .maincard {
        margin-bottom: 7px;
      }
    }
  }
}
</style>
